---
interface Props {
    tag: string;
}

const { tag } = Astro.props as Props;

// Tag color helpers
const specialTagStyles = new Map<string, string>([
    ["vue", "bg-[#4FC08D]"],
    ["vue 3", "bg-[#4FC08D]"],
    ["javascript", "bg-[#F7DF1E]"],
    ["css", "bg-[#663399]"],
    ["html", "bg-[#E34F26]"],
    ["typescript", "bg-[#3178C6] text-white"],
    ["tailwind css", "bg-[#06B6D4]"],
    ["react", "bg-[#61DAFB]"],
    ["svelte", "bg-[#FF3E00]"],
    ["astro", "bg-[#BC52EE]"],
    ["gsap", "bg-green-500"],
    ["linux", "bg-[#FCC624]"],
    ["bash", "bg-[#4EAA25]"],
    ["zsh", "bg-[#F15A24]"],
    ["git", "bg-[#F05032]"],
    ["github", "bg-[#181717] text-white"],
    ["web development", "bg-cyan"],
    ["web", "bg-cyan"],
    ["portfolio", "bg-primary"],
    ["arch linux", "bg-[#1793D1]"],
    ["arch", "bg-[#1793D1]"],
    ["raspberry pi", "bg-[#6CC04A]"],
    ["rust", "bg-black text-white"],
    ["nordvpn", "bg-[#4687FF]"],
    ["strongswan", "bg-[#E00033]"],
    ["bluetooth", "bg-[#0082FC]"],
]);

function getTagClasses(tag: string): string {
    const key = tag.toLowerCase();
    return specialTagStyles.get(key) ?? "";
}
---

<span
    class={`border-2 border-black px-2 md:px-3 py-0.5 md:py-1 ${getTagClasses(tag)}`}
>
    #{tag}
</span>
